<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%String contextRoot = request.getContextPath();%>
<f:loadBundle basename="properties.messages" var="msg" />
<f:view>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>SISDEP : Sistema de Informaci<h:outputText value="#{msg.tilde_o}" />n de Espacio P<h:outputText value="#{msg.tilde_u}" />blico</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="<%=contextRoot%>/css/validationEngine.jquery.css" type="text/css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/normalize.css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/uniform.css"> <!-- estilos formularios -->
	<link rel="stylesheet" href="<%=contextRoot%>/css/cuerpo.css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/richCustom.css">	
</head>
<body>
<div id="marco"> <!--inicio contenedor --> 
<div class="arriba-cuerpo"></div> 
<div class="cuerpo">
<a href="<%=contextRoot%>/index.jsf"><img src="<%= contextRoot %>/images/logos.png" /></a>
<div class="clear"></div>
<!-- Menu y Usuario init() -->
	<%@ include file="include/menuUsuario.jsp" %>
<!-- Menu y Usuario end() -->
<div class="clear"></div>
<!-- Formulario -->
<div id="buscador">
<h2>Gesti<h:outputText value="#{msg.tilde_o}" />n de Persona: EDICION</h2>
<h:form id="updatePersonaForm">
	<h:inputHidden id="id" value="#{personaController.persona.id}" />

						<span class="left" style="margin-left:0px">
						<label>Tipo Persona <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idTipoPersona" styleClass="validate[required]" value="#{personaController.persona.idTipoPersonaStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.personType}"/>
	                            </h:selectOneMenu>
						</span>
						<div class="clear"></div>
						<span class="left" style="margin-left:0px">
						<label>Tipo Identificaci<h:outputText value="#{msg.tilde_o}" />n <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idTipoIdentificacionStr" styleClass="validate[required]" value="#{personaController.persona.idTipoIdentificacionStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.classIdentificationForFilingType}"/>
	                            </h:selectOneMenu>
						</span>
						<span class="left" style="margin-left:5px">
						<label>Identificaci<h:outputText value="#{msg.tilde_o}" />n <span class="asterisco">*</span></label>
								<h:inputText id="identificacion" size="20" maxlength="20" styleClass="validate[required,custom[onlyLetterNumber],minSize[5]]"
										value="#{personaController.persona.identificacion}" />
								<a4j:commandButton id="checkSnapshotButton"
									 styleClass="botonsmall"
					                 type="submit" 
					                 value="Verificar FOTO..." ajaxSingle="true" 
					                 ondblclick="return false;" reRender="checkSnapshotPanel"
			                         action="#{integrationController.checkSnapshot}" >

			                         <a4j:actionparam name="docIdTypeParam" value="document.getElementById('createPersonaForm:idTipoIdentificacion').value" 
			                                          assignTo="#{personaController.persona.idTipoIdentificacionStr}" noEscape="true" />
			                         <a4j:actionparam name="docIdParam" value="document.getElementById('createPersonaForm:identificacion').value" 
			                                          assignTo="#{personaController.persona.identificacion}" noEscape="true" />
			                         
							    </a4j:commandButton>																	
						</span>
						<div class="clear"></div>
						<span class="left" style="margin-left:0px">
							<a4j:outputPanel id="checkSnapshotPanel" layout="block" >
							<h:panelGrid columns="1" style="text-align: left;" styleClass="tablapaginacion" >
								<h:graphicImage url="/uploads/#{personaController.persona.idTipoIdentificacionStr}_#{personaController.persona.identificacion}.jpg" />
	                        </h:panelGrid>							
	                        </a4j:outputPanel>                        			
						</span>
						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Primer Nombre <span class="asterisco">*</span></label>
								<h:inputText id="primerNombre" size="40" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.primerNombre}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Segundo Nombre </label>
								<h:inputText id="segundoNombre" size="40" maxlength="60" styleClass=""
										value="#{personaController.persona.segundoNombre}" />
						</span>

						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Primer Apellido <span class="asterisco">*</span></label>
								<h:inputText id="primerApellido" size="40" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.primerApellido}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Segundo Apellido </label>
								<h:inputText id="segundoApellido" size="40" maxlength="60" styleClass=""
										value="#{personaController.persona.segundoApellido}" />
						</span>

						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Tel<h:outputText value="#{msg.tilde_e}" />fono Residencia <span class="asterisco">*</span></label>
								<h:inputText id="telefonoResidencia" size="20" maxlength="20" styleClass="validate[required,custom[integer],minSize[7]]"
										value="#{personaController.persona.telefonoResidencia}" />
						</span>
						<span class="left" style="margin-left:5px">						<label>Tel<h:outputText value="#{msg.tilde_e}" />fono Familiar <span class="asterisco">*</span></label>
								<h:inputText id="telefonoFamiliar" size="20" maxlength="20" styleClass="validate[required,custom[integer],minSize[7]]"
										value="#{personaController.persona.telefonoFamiliar}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Tel<h:outputText value="#{msg.tilde_e}" />fono Conocido <span class="asterisco">*</span></label>
								<h:inputText id="telefonoConocido" size="20" maxlength="20" styleClass="validate[required,custom[integer],minSize[7]]"
										value="#{personaController.persona.telefonoConocido}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>N<h:outputText value="#{msg.tilde_u}" />mero Celular </label>
								<h:inputText id="numeroCelular" size="20" maxlength="20" styleClass="validate[custom[integer],minSize[10]]"
										value="#{personaController.persona.numeroCelular}" />
						</span>

						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
							<label>Direcci<h:outputText value="#{msg.tilde_o}" />n Residencia <span class="asterisco">*</span></label>
	
							<h:inputText id="direccionResidencia" size="60" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.direccionResidencia}" />     
								
							<a4j:commandButton id="checkAddressButton"
											 styleClass="botonsmall"
							                 type="submit" 
							                 value="Verificar..." ajaxSingle="true" 
							                 ondblclick="return false;" reRender="checkAddressPanel"
					                         action="#{personaController.checkAddress}" >
					                         
					                         <a4j:actionparam name="addressParam" value="document.getElementById('updatePersonaForm:direccionResidencia').value" 
					                                          assignTo="#{personaController.persona.direccionResidencia}" noEscape="true" />
							</a4j:commandButton>
						</span>
						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px"><label>
						<a4j:outputPanel id="checkAddressPanel" layout="block" >
							<h:panelGrid columns="1" style="text-align: left;" styleClass="tablapaginacion" >
							<h:outputText value="Barrio: #{personaController.persona.codigoBarrio}-#{personaController.persona.barrio}" />
							<h:outputText value="Comuna: #{personaController.persona.codigoComuna}-#{personaController.persona.comuna}" />
	                        </h:panelGrid>
                        </a4j:outputPanel>
                        </label>			
						</span>

						<div class="clear"></div>                        
						
						<div class="clear" style="margin-left: 400px;"></div>
						<span class="left" style="margin-left:0px">
						<label>Estrato <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idEstrato" styleClass="validate[required]" value="#{personaController.persona.idEstratoStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.socialEconomicStratumTypeList}"/>
	                            </h:selectOneMenu>
						</span>
						<span class="left" style="margin-left:5px">
						<label>Sexo <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idSexo" styleClass="validate[required]" value="#{personaController.persona.idSexoStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.sexTypeList}"/>
	                            </h:selectOneMenu>
						</span>
						<span class="left" style="margin-left:5px">
						<label>Fecha Nacimiento <span class="asterisco">*</span></label>
							<h:inputText id="fechaNacimiento" styleClass="validate[required,custom[date]] fechaNacimiento" size="10" maxlength="10"
									value="#{personaController.persona.fechaNacimiento}" onblur="calcularEdad(this.value.substring(0,2),this.value.substring(3,5),this.value.substring(6,10));">
								<f:convertDateTime pattern="dd/MM/yyyy"/>
							</h:inputText>
						</span>
						<span class="left" style="margin-left:5px">
						<label>Escolaridad <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idEscolaridad" styleClass="validate[required]" value="#{personaController.persona.idEscolaridadStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.schoolingTypeList}"/>
	                            </h:selectOneMenu>
						</span>

						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Email </label>
								<h:inputText id="email" size="40" maxlength="60" styleClass="validate[custom[email]]"
										value="#{personaController.persona.email}" />
						</span>


						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Departamento <span class="asterisco">*</span></label>
								<h:inputText id="departamento" size="40" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.departamento}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Municipio <span class="asterisco">*</span></label>
								<h:inputText id="municipio" size="40" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.municipio}" />
						</span>

						<div class="clear" style="margin-left: 400px;"></div>
						
						<span class="left" style="margin-left:0px">
						<label>Lugar Nacimiento <span class="asterisco">*</span></label>
								<h:inputText id="lugarNacimiento" size="40" maxlength="60" styleClass="validate[required]"
										value="#{personaController.persona.lugarNacimiento}" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Edad <span class="asterisco">*</span></label>
								<h:inputText id="edad" size="2" maxlength="2" styleClass="validate[required,custom[integer]]"
										value="#{personaController.persona.edadStr}" disabled="true" />
						</span>
						<span class="left" style="margin-left:5px">
						<label>Estado Civ<h:outputText value="#{msg.tilde_i}" />l <span class="asterisco">*</span></label>
								<h:selectOneMenu id="idEstadoCivil" styleClass="validate[required]" value="#{personaController.persona.idEstadoCivilStr}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItems value="#{masterListCache.maritalStateList}"/>
	                            </h:selectOneMenu>
						</span>

						<div class="clear" style="margin-left: 400px;"></div>

						<span class="left" style="margin-left:0px">
						<label>Estado <span class="asterisco">*</span></label>
								<h:selectOneMenu id="estado" styleClass="validate[required]" value="#{personaController.persona.estado}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItem itemLabel="Activo" itemValue="ACTIVO"/>
	                                <f:selectItem itemLabel="Inactivo" itemValue="INACTIVO"/>
	                                <f:selectItem itemLabel="Retirado" itemValue="RETIRADO"/>
	                            </h:selectOneMenu>
						</span>
						<span class="left" style="margin-left:20px">
						<label>Motivo de Registro <span class="asterisco">*</span></label>
								<h:selectOneMenu id="motivoRegistro" styleClass="validate[required]" value="#{personaController.persona.motivoRegistro}">
	                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
	                                <f:selectItem itemLabel="Solicitud" itemValue="Solicitud"/>
	                                <f:selectItem itemLabel="Representante Legal" itemValue="Representante_Legal"/>	                                
	                            </h:selectOneMenu>
						</span>							
		<br/>
		<br/>
		<br/>
		<div class="clear"></div>
		(<span class="asterisco"> * </span>) : Campo Obligatorio
		<div class="clear"></div>
		<span class="botones right">
		<h:commandButton id="updatePersonaButton"
						 styleClass="botonsmall"
		                 type="submit" 
		                 value="Guardar" 
		                 ondblclick="return false;" 
		                 action="#{personaController.update}" >
		</h:commandButton>
		</span>
</h:form>
</div>
<!-- Fin formulario --> 
<div class="clear"></div>
	<div>
		    <h:form id="cancelPersonaForm">
			<h:commandButton id="cancelCreatePersonaButton"
							 styleClass="botonsmall" 
                             type="submit" 
                             value="Cancelar" 
                             ondblclick="return false;" 
                             action="#{personaController.cancelPersona}" >
            </h:commandButton>
            </h:form>
	<br/>
	<br/>
	<!-- tabla --> 
	<div class="clear" style="width: 400px; margin-left: 0px;"></div>
	<div class="clear" style="margin-left: 350px;"></div>
	<span class="botones left" style="width: 223px; height: 15px; margin-left:25px; padding-top:5px; padding-bottom:5px; padding-left:20px; padding-right:20px; background-color: #006F73; color: white;">
	Informaci<h:outputText value="#{msg.tilde_o}" />n de Auditor<h:outputText value="#{msg.tilde_i}" />a
	</span>
	<div class="clear" style="margin-left: 350px;"></div>
	<div>
		<span class="left" >
		<span class="left" style="width: 110px; height: 15px; margin-left:25px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #EDEDED; border-top: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999; color: #666666;">Usuario Creaci<h:outputText value="#{msg.tilde_o}" />n</span>
		<span class="left" style="width: 110px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #EDEDED; border-top: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;">Fecha Creaci<h:outputText value="#{msg.tilde_o}" />n</span>
		<span class="left" style="width: 170px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #EDEDED; border-top: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;">Usuario <h:outputText value="#{msg.tilde_u}" />ltima Modificaci<h:outputText value="#{msg.tilde_o}" />n</span>
		<span class="left" style="width: 170px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #EDEDED; border-top: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;">Fecha <h:outputText value="#{msg.tilde_u}" />ltima Modificaci<h:outputText value="#{msg.tilde_o}" />n</span>
		</span>		
		<span class="left" >
		<span class="left" style="width: 110px; height: 15px; margin-left:25px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #ffffff; border-top: 0px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999; color: #666666;"><h:outputText value="#{personaController.persona.usuarioCrea}" /></span>
		<span class="left" style="width: 110px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #ffffff; border-top: 0px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;"><h:outputText value="#{personaController.persona.fechaCrea}" /></span>
		<span class="left" style="width: 170px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #ffffff; border-top: 0px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;"><h:outputText value="#{personaController.persona.usuarioModifica}" /></span>
		<span class="left" style="width: 170px; height: 15px; margin-left:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; background-color: #ffffff; border-top: 0px solid #999999; border-bottom: 1px solid #999999; border-left: 0px solid #999999; border-right: 1px solid #999999; color: #666666;"><h:outputText value="#{personaController.persona.fechaModifica}" /></span>
		</span>
	</div>
	<div class="clear"><br/></div>
	</div>
</div>
<div class="abajo-cuerpo"></div> 
</div> <!-- Fin contenedor -->
<div class="footer"></div>
	<script src="<%=contextRoot%>/js/jquery/lib/jquery-1.7.2.min.js"></script><!-- De ser 1ro -->
	<script src="<%=contextRoot%>/js/script.js" type="text/javascript"></script><!-- De ser 2do -->
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.uniform.min.js"></script> <!-- formularios -->
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine-es.js" type="text/javascript" charset="utf-8"></script>
    <script src="<%= contextRoot %>/js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		
        jQ(document).ready(function() {
        	jQ("input, select, input:checkbox, input:radio, input:file").uniform();
        	jQ("#updatePersonaForm").validationEngine('attach');
        	jQ("#updatePersonaForm").bind("jqv.form.result", 
                	function(event, errorFound) {
        				if(!errorFound){ 
            				displayLoadingImage();
        				}
        			});
        });

        function calcularEdad(dia_nacim,mes_nacim,anio_nacim){
        	var edad = 0;
        	var fecha_hoy = new Date();
            if(dia_nacim.length == 2 && mes_nacim.length == 2 && anio_nacim.length == 4 
                    && dia_nacim > 0 && dia_nacim < 32
                    && mes_nacim > 0 && mes_nacim < 13
                    && anio_nacim > 1899 && anio_nacim < (fecha_hoy.getYear() + 1)
                    ){
	            var ahora_anio = fecha_hoy.getYear();
	            var ahora_mes = fecha_hoy.getMonth();
	            var ahora_dia = fecha_hoy.getDate();
	            var edad = (ahora_anio + 1900) - anio_nacim;
	            if ( ahora_mes < (mes_nacim - 1)){
	              edad--;
	            }
	            if(((mes_nacim - 1) == ahora_mes) && (ahora_dia < dia_nacim)){ 
	              edad--;
	            }
	            if(edad > 1900){
	            	edad -= 1900;
	            }
            }
            document.getElementById('updatePersonaForm:edad').value = edad;
          	return true;
        }
        
    </script>
   	<%@ include file="include/validationStatus.jsp" %>    
</body>
</html>
</f:view>
